<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2023年度最佳技术博客评选 - 多元论坛</title>

    @include("frontend/bootstrap/common/css")


    <link href="/theme/bootstrap/css/vote-event.css?t={{$version}}" rel="stylesheet">



    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #eef0ff;
            --primary-dark: #3a0ca3;
            --secondary: #f72585;
            --success: #4cc9f0;
            --warning: #f72585;
            --dark: #1d3557;
            --light: #f8f9fa;
            --gray: #6c757d;
            --border: #dee2e6;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #f5f7ff;
            color: var(--dark);
            line-height: 1.6;
        }



    </style>
</head>
<body>

<!-- 主内容区 -->
<div class="container py-5">
    <!-- 路径导航 -->
    @include("frontend/bootstrap/common/breadcrumb")

    <!-- 活动头部 -->
    <div class="campaign-header">
        <h1 class="campaign-title">2023年度最佳技术博客评选</h1>

        <div class="campaign-meta">
            <div class="campaign-meta-item">
                <i class="fas fa-calendar-alt"></i>
                <span>2023-11-01 至 2023-11-30</span>
            </div>
            <div class="campaign-meta-item">
                <i class="fas fa-user-friends"></i>
                <span>主办方: 多元论坛官方</span>
            </div>
            <div class="campaign-meta-item">
                <i class="fas fa-tags"></i>
                <span>技术博客, 年度评选, 前端开发</span>
            </div>
        </div>

        <p class="campaign-description">
            2023年度最佳技术博客评选活动正式启动！无论你是技术专家还是编程爱好者，都可以推荐或展示自己的技术博客，参与评选。活动将根据社区投票和专家评审，评选出年度最佳技术博客，获奖者将获得丰厚奖励和社区推广机会。
        </p>

        <div class="campaign-stats">
            <div class="campaign-stat">
                <div class="stat-value">128</div>
                <div class="stat-label">参与博客</div>
            </div>
            <div class="campaign-stat">
                <div class="stat-value">5,342</div>
                <div class="stat-label">累计投票</div>
            </div>
            <div class="campaign-stat">
                <div class="stat-value">18</div>
                <div class="stat-label">剩余天数</div>
            </div>
        </div>

        <div class="campaign-actions">
            <button type="button" class="btn btn-light btn-lg" data-bs-toggle="modal"
                    data-bs-target="#participateModal">
                <i class="fas fa-plus-circle"></i> 参与评选
            </button>
            <button class="btn btn-outline-light btn-lg">
                <i class="fas fa-share-alt"></i> 分享活动
            </button>
        </div>
    </div>

    <!-- 文章列表区域 -->
    <h2 class="section-title"><i class="fas fa-list-alt"></i> 参与评选的博客文章</h2>

    <div class="articles-container">
        <div class="articles-header">
            <div class="articles-filters">
                <div class="filter-sort">
                    <span class="filter-label">排序方式:</span>
                    <select class="form-select form-select-sm" id="sortSelect">
                        <option value="votes">按票数排序</option>
                        <option value="latest">最新参与</option>
                        <option value="trending">热门趋势</option>
                    </select>

                    <span class="filter-label ms-3">分类:</span>
                    <select class="form-select form-select-sm" id="categorySelect">
                        <option value="all">全部</option>
                        <option value="frontend">前端开发</option>
                        <option value="backend">后端开发</option>
                        <option value="mobile">移动开发</option>
                        <option value="ai">人工智能</option>
                        <option value="devops">DevOps</option>
                    </select>
                </div>

                <div class="view-controls">
                    <span class="filter-label">视图:</span>
                    <button class="view-btn active" data-view="list" title="列表视图">
                        <i class="fas fa-list"></i>
                    </button>
                    <button class="view-btn" data-view="grid" title="网格视图">
                        <i class="fas fa-th"></i>
                    </button>
                    <button class="view-btn" data-view="card" title="卡片视图">
                        <i class="fas fa-grip-horizontal"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 文章列表容器 - 默认为列表视图 -->
        <div class="articles-list-view" id="articlesContainer">
            <!-- 文章1 -->
            <div class="article-item">
                <div class="article-rank top-1">1</div>
                <img src="https://picsum.photos/400/300?random=10" alt="现代JavaScript开发指南" class="article-image">
                <div class="article-content">
                    <h3><a href="#" class="article-title">现代JavaScript开发指南：从基础到高级实践</a></h3>
                    <div class="article-meta">
                        <div class="article-author">
                            <img src="https://picsum.photos/100/100?random=1" alt="李前端" class="author-avatar">
                            <span>李前端</span>
                        </div>
                        <div class="article-date"><i class="far fa-calendar"></i> 2023-10-15</div>
                        <div class="article-category"><i class="fas fa-folder"></i> 前端开发</div>
                    </div>
                    <p class="article-excerpt">
                        本文详细介绍了现代JavaScript开发的核心概念和最佳实践，从ES6+新特性到异步编程模式，再到模块化开发和测试策略，全方位覆盖JavaScript开发的各个方面。</p>
                    <div class="article-tags">
                        <a href="#" class="article-tag">JavaScript</a>
                        <a href="#" class="article-tag">ES6</a>
                        <a href="#" class="article-tag">前端开发</a>
                    </div>
                    <div class="voting-progress">
                        <div class="progress-bar" style="width: 85%"></div>
                    </div>
                    <div class="article-actions">
                        <div class="votes-count">
                            <i class="fas fa-vote-yea"></i>
                            <span>856 票</span>
                        </div>
                        <button class="vote-btn voted">
                            <i class="fas fa-check"></i>
                            已投票
                        </button>
                    </div>
                </div>
            </div>

            <!-- 文章2 -->
            <div class="article-item">
                <div class="article-rank top-2">2</div>
                <img src="https://picsum.photos/400/300?random=11" alt="React性能优化实战" class="article-image">
                <div class="article-content">
                    <h3><a href="#" class="article-title">React性能优化实战：从理论到实践</a></h3>
                    <div class="article-meta">
                        <div class="article-author">
                            <img src="https://picsum.photos/100/100?random=2" alt="王React" class="author-avatar">
                            <span>王React</span>
                        </div>
                        <div class="article-date"><i class="far fa-calendar"></i> 2023-10-10</div>
                        <div class="article-category"><i class="fas fa-folder"></i> 前端开发</div>
                    </div>
                    <p class="article-excerpt">
                        深入探讨React应用性能优化的各种技巧和方法，从虚拟DOM原理到组件优化，从状态管理到代码分割，通过实际案例讲解如何构建高性能的React应用。</p>
                    <div class="article-tags">
                        <a href="#" class="article-tag">React</a>
                        <a href="#" class="article-tag">性能优化</a>
                        <a href="#" class="article-tag">前端框架</a>
                    </div>
                    <div class="voting-progress">
                        <div class="progress-bar" style="width: 72%"></div>
                    </div>
                    <div class="article-actions">
                        <div class="votes-count">
                            <i class="fas fa-vote-yea"></i>
                            <span>721 票</span>
                        </div>
                        <button class="vote-btn">
                            <i class="far fa-thumbs-up"></i>
                            投票
                        </button>
                    </div>
                </div>
            </div>

            <!-- 文章3 -->
            <div class="article-item">
                <div class="article-rank top-3">3</div>
                <img src="https://picsum.photos/400/300?random=12" alt="Docker容器化部署指南" class="article-image">
                <div class="article-content">
                    <h3><a href="#" class="article-title">Docker容器化部署指南：从入门到精通</a></h3>
                    <div class="article-meta">
                        <div class="article-author">
                            <img src="https://picsum.photos/100/100?random=3" alt="张运维" class="author-avatar">
                            <span>张运维</span>
                        </div>
                        <div class="article-date"><i class="far fa-calendar"></i> 2023-10-05</div>
                        <div class="article-category"><i class="fas fa-folder"></i> DevOps</div>
                    </div>
                    <p class="article-excerpt">全面介绍Docker容器化技术的核心概念和实践方法，从基本命令到Docker
                        Compose，从镜像优化到容器编排，帮助开发者掌握现代化的应用部署方式。</p>
                    <div class="article-tags">
                        <a href="#" class="article-tag">Docker</a>
                        <a href="#" class="article-tag">容器化</a>
                        <a href="#" class="article-tag">DevOps</a>
                    </div>
                    <div class="voting-progress">
                        <div class="progress-bar" style="width: 68%"></div>
                    </div>
                    <div class="article-actions">
                        <div class="votes-count">
                            <i class="fas fa-vote-yea"></i>
                            <span>683 票</span>
                        </div>
                        <button class="vote-btn">
                            <i class="far fa-thumbs-up"></i>
                            投票
                        </button>
                    </div>
                </div>
            </div>

            <!-- 文章4 -->
            <div class="article-item">
                <div class="article-rank">4</div>
                <img src="https://picsum.photos/400/300?random=13" alt="Python数据分析实战" class="article-image">
                <div class="article-content">
                    <h3><a href="#" class="article-title">Python数据分析实战：从数据获取到可视化</a></h3>
                    <div class="article-meta">
                        <div class="article-author">
                            <img src="https://picsum.photos/100/100?random=4" alt="刘数据" class="author-avatar">
                            <span>刘数据</span>
                        </div>
                        <div class="article-date"><i class="far fa-calendar"></i> 2023-09-28</div>
                        <div class="article-category"><i class="fas fa-folder"></i> 数据分析</div>
                    </div>
                    <p class="article-excerpt">
                        使用Python进行数据分析的实战指南，涵盖Pandas、NumPy、Matplotlib等核心库的使用方法，通过实际案例讲解数据清洗、分析和可视化的完整流程。</p>
                    <div class="article-tags">
                        <a href="#" class="article-tag">Python</a>
                        <a href="#" class="article-tag">数据分析</a>
                        <a href="#" class="article-tag">可视化</a>
                    </div>
                    <div class="voting-progress">
                        <div class="progress-bar" style="width: 55%"></div>
                    </div>
                    <div class="article-actions">
                        <div class="votes-count">
                            <i class="fas fa-vote-yea"></i>
                            <span>552 票</span>
                        </div>
                        <button class="vote-btn">
                            <i class="far fa-thumbs-up"></i>
                            投票
                        </button>
                    </div>
                </div>
            </div>

            <!-- 文章5 -->
            <div class="article-item">
                <div class="article-rank">5</div>
                <img src="https://picsum.photos/400/300?random=14" alt="Flutter跨平台开发" class="article-image">
                <div class="article-content">
                    <h3><a href="#" class="article-title">Flutter跨平台开发：一次编写，多端运行</a></h3>
                    <div class="article-meta">
                        <div class="article-author">
                            <img src="https://picsum.photos/100/100?random=5" alt="陈移动" class="author-avatar">
                            <span>陈移动</span>
                        </div>
                        <div class="article-date"><i class="far fa-calendar"></i> 2023-09-20</div>
                        <div class="article-category"><i class="fas fa-folder"></i> 移动开发</div>
                    </div>
                    <p class="article-excerpt">
                        详细介绍Flutter跨平台开发框架的使用方法和最佳实践，从环境搭建到UI组件，从状态管理到原生交互，帮助开发者快速构建高性能的跨平台应用。</p>
                    <div class="article-tags">
                        <a href="#" class="article-tag">Flutter</a>
                        <a href="#" class="article-tag">跨平台</a>
                        <a href="#" class="article-tag">移动开发</a>
                    </div>
                    <div class="voting-progress">
                        <div class="progress-bar" style="width: 48%"></div>
                    </div>
                    <div class="article-actions">
                        <div class="votes-count">
                            <i class="fas fa-vote-yea"></i>
                            <span>487 票</span>
                        </div>
                        <button class="vote-btn">
                            <i class="far fa-thumbs-up"></i>
                            投票
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li class="page-item"><a class="page-link active" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">4</a></li>
                <li class="page-item"><a class="page-link" href="#">5</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

@include("frontend/bootstrap/vote/event-js")

</body>
</html>
    
